<template>
  <el-dialog
    title="排序"
    :visible.sync="dialogVisible"
    width="380px"
    append-to-body
    :before-close="closeDialog">
    <div class="container">
      <draggable
        v-model="dragList"
        chosen-class="chosen"
        force-fallback="true"
        group="text"
        animation="1000"
        @start="onStart"
        @end="onEnd"
        @choose="onChoose"
        handle=".dragicon"
      >
        <transition-group>
          <div
            class="item"
            v-for="(item,index) in dragList"
            :key="item.text"
          >
            <div class="dragicon" :class="{drag:item.drag}"></div>
            <img class="icon-img" :src="item.img" alt="" />
            <div class="text">{{ item.text }}</div>
          </div>
        </transition-group>
      </draggable>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dragList: [],
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    //关闭弹窗
    closeDialog() {
      this.$emit('close')
    },
    //确定
    save(){
      console.log(this.options)
      // this.$emit('save', [
      //   ...(this.$utilJs.deepClone(this.dragList).map((item)=>{
      //     delete item.drag
      //     return item
      //   }))
      // ])
      this.$emit('save', this.dragList.map((item)=>{
        return item
      }))
    },
    onStart(e) {
      this.dragList[e.oldIndex].drag = true
    },
    onEnd(e) {
      this.dragList[e.newIndex].drag = false
    },
    onChoose(e) {
      this.dragList[e.oldIndex].drag = true
    },
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(val){
        if(val){
          this.dragList = this.options.length ? this.options.map((item)=>{
            return { ...item, drag: false }
          }) : []
        }
      }
    }
  },
};
</script>
<style scoped lang="less">
@textColor: #1f1e1d;
@ntalkColor: #e67529;
@font-face {
  font-family: MiSans;
  src: url('~@/assets/dashboard/font/MiSans-Medium.ttf');
  //src: url('~@/assets/dashboard/font/MiSans-Normal.ttf');
}
* {
  font-family: MiSans;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.container {
  width: 100%;
  height: 290px;
  overflow-y: auto;
  .item {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    .dragicon {
      width: 16px;
      height: 16px;
      background-image: url('~@/assets/dashboard/drag.png');
      background-size: 100% 100%;
      cursor: move;
      &.drag {
        background-image: url('~@/assets/dashboard/dragging.png');
      }
    }
    .dragiconfix {
      width: 16px;
      height: 16px;
    }
    .icon-img {
      width: 32px;
      height: 32px;
      margin-left: 12px;
    }
    .text {
      margin-left: 12px;
      height: 48px;
      line-height: 48px;
      box-sizing: border-box;
      font-size: 14px;
      color: @textColor;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      width: calc(100% - 28px);
    }
    &:last-child .text {
      border-bottom: none;
    }
  }
}
.chosen {
  border-radius: 6px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  .text {
    border-bottom: none;
  }
}
</style>
